<script setup lang="ts">
import { ViewDetailAPI } from '@/apis/card';
import type { ViewListDetail } from '@/types/card';
import { ref } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute()

const ViewDetail = ref<ViewListDetail>()
// 请求详情
const getViewDetail = async ( id: number) => {
  const res = await ViewDetailAPI(id)
  // console.log(res);
  ViewDetail.value = res.data
}
if (route.params.id) {
  getViewDetail(Number(route.params.id))
}
</script>


<template>
  <div class="view-card">
    <header class="view-header">
      <el-page-header content="查看详情" @back="$router.back()" />
    </header>
    <main class="view-main">
      <div class="card-header">
        <div class="title">车辆信息</div>
        <div class="carContent">
          <!-- 内容 -->
          <div class="tr">
            <div class="item">
              <span class="label">车主姓名：</span>
              <span class="value"> {{ ViewDetail?.personName}}</span>
            </div>
            <div class="item">
              <span class="label">车牌号码：</span>
              <span class="value">{{ ViewDetail?.carNumber }} </span>
            </div>
          </div>
          <div class="tr">
            <div class="item">
              <span class="label">联系方式：</span>
              <span class="value"> {{ ViewDetail?.phoneNumber }}</span>
            </div>
            <div class="item">
              <span class="label">车辆品牌：</span>
              <span class="value"> {{ ViewDetail?.carBrand }}</span>
            </div>
          </div>


        </div>
      </div>

      <div class="card-header" style="margin-top: 20px; padding-bottom: 30px;">
        <div class="title">月卡缴费记录</div>
        <div class="cardContent" style="display: flex; justify-content: center;">
          <!-- 表格 序号 有效时间 支付金额 支付方式 办理时间 办理人 -->
          <el-table :data="ViewDetail?.rechargeList" style="width: 97%;">
            <el-table-column type="index" label="序号" width="180" />
            <el-table-column prop="" label="有效时间" width="280" >
              <template #default="scope">
                <text>{{ scope.row.cardStartDate }}</text>
                <text>至</text>
                <text>{{ scope.row.cardEndDate }}</text>
              </template>
            </el-table-column>
            <el-table-column prop="paymentAmount" label="支付金额" />
            <el-table-column prop="paymentMethod" label="支付方式" >
              <template #default="scope">
                <el-tag v-if="scope.row.paymentMethod === 'Alipay'" type="success">支付宝</el-tag>
                <el-tag v-else-if="scope.row.paymentMethod === 'WeChat'" type="warning">微信</el-tag>
                <el-tag v-else type="danger">线下</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="办理时间" />
            <el-table-column prop="createUser" label="办理人" />
          </el-table>
        </div>
      </div>
    </main>
  </div>
</template>


<style scoped lang="scss">
/*  在这里编写组件的样式 */
.view-card {
  background-color: #f4f6f8;
  height: 100vh;

  .view-header {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 64px;
    background-color: #fff;
  }

  .view-main {
    background: #f4f6f8;
    padding: 20px 130px;

    .card-header {
      background-color: #fff;

      .title {
        height: 60px;
        line-height: 60px;
        padding-left: 20px;
      }
    }

    .preview {
      img {
        width: 100px;
      }
    }
  }
}
.carContent {
  padding: 30px 0px 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .tr {
    width: 60%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin-left: 180px;
    margin-bottom: 30px;

    .item {
      &:nth-child(1) {
        margin-bottom: 25px;
      }
    }

    .label {
      color: #9fa1a6;
      font-size: 14px;
    }

    .value {
      color: #393939;
      font-weight: 500;
      font-size: 15px;
    }
  }
}
</style>